<template>
  <div class="cmscomen productMana">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">产品管理</span>
      </div>
      <div class="formInfo">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          align="right"
          unlink-panels
          @change="dateChange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy / MM / dd"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-select v-model="platform_items.model_value" :placeholder="platform_items.placeHolder" clearable filterable @change="proInfo">
          <el-option
            v-for="item in platform_items.options"
            :key="item.platformId"
            :label="item.platformName"
            :value="item.platformId">
          </el-option>
        </el-select>
        <el-select v-model="pro_items.model_value" :placeholder="pro_items.placeHolder" clearable filterable @change="productInfo">
          <el-option
            v-for="item in pro_items.options"
            :key="item.productId"
            :label="item.productName"
            :value="item.productId">
          </el-option>
        </el-select>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary" @click="importData">导出数据</el-button>
          <el-button type="primary" @click="newProduct">新建产品</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
          <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="拼命加载中"
            border
            style="width: 100%">
            <el-table-column
                v-for="c in table_column"
                :key="c.prop"
                :fixed="c.fixed"
                :sortable="c.sortable"
                :prop="c.prop"
                :label="c.label"
                :formatter="c.format"
                :min-width="c.minwidth"
                v-if="c.visible">
            </el-table-column>
            <el-table-column
                label="操作"
                width="80"
                align="center"
                class-name="exitBut">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="操作" placement="top">
                        <el-button style="padding:3px 3px" type="primary" class="inlineBox icon iconfont icon-tubiao109" circle v-if="scope.row.dataTime!='总计'" @click="editEvent(scope.row.id)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page.currentPage"
              :page-sizes="page.sizes"
              :page-size="page.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name:'accountData',
  data(){
    return{
      loading:false,
      currentPage4: 4,
      dateValue:'',
      checkedCities: ['日期', '产品', '平台', '今日消耗', '折后今日消耗', '未结算总预算', '未结算总消耗'],
      cities: ['日期', '产品', '平台', '今日消耗', '折后今日消耗', '未结算总预算', '未结算总消耗'],
      citiesFilterVal: ['dataTime', 'product', 'platform', 'yestConsume', 'todayConsume', 'dctTodayConsume', 'nsettlementBudget',],
      table_column: [
          {fixed: false, prop: 'dataTime', label: '日期', sortable: true, visible: true},
          {fixed: false, prop: 'product', label: '产品', sortable: false, visible: true,minwidth:140},
          {fixed: false, prop: 'platform', label: '平台', sortable: false, visible: true,minwidth:140},
          {fixed: false, prop: 'todayConsume', label: '今日消耗', sortable: false, visible: true},
          {fixed: false, prop: 'dctTodayConsume', label: '折后今日消耗', sortable: false, visible: true},
      ],
      page: {
          sizes: [10, 20, 50,100,200,500],
          offset: 1,
          limit: 10,
          count: 0,
          currentPage: 1,
      },
      platform_items: {
          model_value: '',
          placeHolder: '平台',
          options: []
      },
      pro_items: {
          model_value: '',
          placeHolder: '产品',
          options: []
      },
      params: {
          sDateTime: '',
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
      }],
      tableData: []
    }
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
    this.platform();
  },
  methods:{
    cancelQuest(){
      if(typeof this.source ==='function'){
          this.source('终止请求'); //取消请求
      }
    },
    /*平台*/
    platform(){
        this.$http({
            method: 'get',
            url: this.apiUrl.fdpPlaGetPlatformList,
        }).then(res => {
            if (res.status == 200) {
                var data = res.data;
                this.platform_items.options = data;
            } else {
            }
        }).catch(error => {
            console.log(error);
        });
    },
    /*产品*/
    proInfo() {
        this.$http({
            method: 'get',
            url: this.apiUrl.fdpProListall,
            params:{
                platformId:this.platform_items.model_value
            }
        }).then(res => {
            if (res.status == 200) {
                var data = res.data;
                this.pro_items.options = data;
            } else {
            }
        }).catch(error => {
            console.log(error);
        });
        this.pageInfo()
    },
    productInfo(){
      this.pageInfo()
    },
    /*查询表格数据*/
    pageInfo() {
        this.tableData=[];
        const _this = this;
        this.cancelQuest(); //在请求发出前取消上一次未完成的请求
        this.loading=true;
        this.$http({
            method: 'get',
            url: this.apiUrl.fdpProSearch,
            params: {
                curPage: this.page.offset,
                limit: this.page.limit,
                productId: this.pro_items.model_value||-1,
                platformId: this.platform_items.model_value||-1,
                sDateTime: this.params.sDateTime,
            },
            cancelToken: new axios.CancelToken(function executor(c) {_this.source = c;})
        }).then(res => {
            this.loading=false;
            console.log(res)
            if (res.status = 200) {
                this.page.count = res.data.totalNums;
                this.tableData = res.data.list;
            }
        }).catch(thrown => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
                console.log(_this.loading)
            } else {
                _this.loading=false;
            }
        });
    },
    /*页码翻页*/
    handleCurrentChange(val) {
        this.page.offset = val;
        this.pageInfo();
    },
    /*改变每页条数*/
    handleSizeChange(val) {
        this.page.limit = val;
        this.pageInfo();
    },
    /*显示、隐藏表格列*/
    checkedChange() {
        for (let item of this.table_column) {
            var index = this.checkedCities.indexOf(item.label);
            index >= 0 ? item.visible = true : item.visible = false;
        }
    },
    /*显示、隐藏表格列容易*/
    changeCheckStatus() {
        this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
    },
    /*body事件*/
    bodyEvent() {
        this.visibleMenuSelectStatus = false;
    },
    /*改变时间选择器*/
    dateChange() {
        if (this.dateValue != '' && typeof this.dateValue != 'undefined' && this.dateValue != null && this.dateValue != null) {
            this.params.sDateTime = this.formatDateTime(this.dateValue[0], 'y/m/d')+'-'+this.formatDateTime(this.dateValue[1], 'y/m/d');
            this.pageInfo();
        } else {
            this.params.sDateTime = '';
        }
    },
    /*导出*/
    importData() {
        if (this.tableData.length == 0) {
            this.$message({
                type: 'info',
                message: '请查询数据'
            });
            return false;
        }
        let tHeader = this.cities;
        let filterVal = this.citiesFilterVal;
        let importData = this.tableData;
        let fileName = [this.params.sDateTime, this.platform_items.model_value,this.pro_items.model_value, '产品数据'].join('_');
        this.handleDownload(tHeader, filterVal, importData, fileName);
    },
    editEvent(id){
        this.$router.push({path: 'proManaEdit',query:{proId:id}});
    },
    newProduct(){
        this.$router.push({path:'/infoFlowData/accountNewProduct'})
    }
  }
}
</script>
<style>
.productMana .infoTable{
  width: 100%;
}
</style>

